<template>
  <div class="login" :class="{ registry: showType === 'registry' }">
    <div class="left">
      <p class="title">绿色科学城市智慧决策支持系统</p>
    </div>
    <div class="right">
      <template v-if="showType === 'login'">
        <p class="login-title">用户登录</p>
        <a-form layout="vertical" :model="formState" @finish="handleFinish">
          <a-form-item name="user">
            <a-input
              v-model:value="formState.user"
              placeholder="请输入登录邮箱"
              autocomplete="email"
            >
              <template #prefix><UserOutlined /></template>
            </a-input>
          </a-form-item>
          <a-form-item name="password">
            <a-input
              v-model:value="formState.password"
              type="password"
              placeholder="请输入登录密码"
              autocomplete="current-password"
            >
              <template #prefix><LockOutlined /></template>
            </a-input>
          </a-form-item>
          <div>
            <a-checkbox v-model:checked="rememberPassword">记住密码</a-checkbox>
            <a-button
              type="link"
              style="float: right"
              @click="showType = 'forgot'"
              >忘记密码？</a-button
            >
          </div>
          <a-form-item class="login-button">
            <a-button
              size="large"
              block
              type="primary"
              html-type="submit"
              :disabled="!formState.user || !formState.password"
            >
              登录
            </a-button>
            <p class="extra">
              <a-button type="link" @click="showType = 'registry'"
                >立即注册</a-button
              >
            </p>
          </a-form-item>
        </a-form>
      </template>
      <Register
        v-else-if="showType === 'registry'"
        @backToLogin="showType = 'login'"
      />
      <ForgotPwd
        v-else-if="showType === 'forgot'"
        @backToLogin="showType = 'login'"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import ForgotPwd from "./ForgotPwd.vue";
import Register from "./Register.vue";
import { useRouter } from "vue-router";
import { login } from "@/api";
import { useUserInfo } from "@/store";
import { debounce } from "lodash-es";
import { initMenu } from "@/utils";
const formState = reactive<{
  user?: string;
  password?: string;
}>({});
let cachePwd: Record<string, string> = {};
try {
  cachePwd = JSON.parse(localStorage.getItem("pwd") || "{}");
} catch (e) {
  console.error(e);
}
const rememberPassword = ref(false);
const showType = ref("login");
const router = useRouter();
const userStore = useUserInfo();
watch(
  () => formState.user,
  debounce((val) => {
    if (val && cachePwd[val]) {
      formState.password = cachePwd[val];
      rememberPassword.value = true;
    }
  }, 300)
);
const handleFinish = () => {
  login(formState).then((res) => {
    userStore.refresh(res);
    if (!formState.user || !formState.password) return;
    if (rememberPassword.value) {
      localStorage.setItem(
        "pwd",
        JSON.stringify({ ...cachePwd, [formState.user]: formState.password })
      );
    } else {
      localStorage.setItem(
        "pwd",
        JSON.stringify({ ...cachePwd, [formState.user]: undefined })
      );
    }
    const page = initMenu.find((item) =>
      item.auth.find((auth) => res.roles?.includes(auth))
    )?.router;
    router.push(page || "/project");
  });
};
</script>
<style lang="scss" scoped>
.login {
  margin: auto;
  min-width: 500px;
  width: 50vw;
  background-color: #fff;
  box-shadow: 0px 0px 10px #ccc;
  display: flex;
  flex-flow: row nowrap;
  border-radius: 4px;
}
.left {
  background-color: $hover-color;
  padding: 12px;
  flex: 2;
}
.title {
  margin-top: 100px;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
}
.right {
  padding: 24px;
  flex: 3;
}
.registry {
  flex-flow: column nowrap;
  & > .left > .title {
    margin-top: 0;
    text-align: center;
  }
  & > .right {
    flex: none;
  }
}
:deep(.login-title) {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 36px;
}
:deep(.login-button) {
  margin-top: 36px;
}
.verify-code {
  width: calc(100% - 140px);
  margin-right: 30px !important;
}
.extra {
  text-align: center;
}
</style>
